<template>
  <el-dialog v-model="dialogVisible" width="832px" append-to-body>
    <Title :title="dialogTitle" />
    <div class="dialog-container">
      <el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="nickName" required>
              <el-input size="large" v-model="form.nickName" placeholder="请输入姓名" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="工号" prop="teachId" required>
            <el-input size="large" v-model="form.teachId" placeholder="请输入工号" maxlength="30" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="学院" prop="deptId" required>
            <el-select size="large" v-model="form.deptId" placeholder="请选择学院" clearable filterable style="width: 100%" @change="onDeptChange">
              <el-option v-for="opt in deptOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="研究方向" prop="majorField" required>
            <el-input size="large" v-model="form.majorField" placeholder="请输入研究方向" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input size="large" v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phonenumber">
            <el-input size="large" v-model="form.phonenumber" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="简介" prop="summary">
            <el-input size="large" v-model="form.summary" type="textarea" placeholder="请输入简介" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel" class="defauleButton">取消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { addTeacher, updateTeacher, getTeacher } from '@/api/teacher'
import { ref, getCurrentInstance } from 'vue'
import Title from '@/components/Title/index.vue'

const { proxy } = getCurrentInstance()

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const emit = defineEmits(['update'])
const props = defineProps({
  tree: {
    type: Array,
    default: () => []
  }
})
const deptOptions = computed(() => props.tree.map((item) => ({ value: item.deptId, label: item.deptName })))
const form = ref({
  teacherId: undefined,
  teachId: '',
  nickName: '',
  deptId: undefined,
  phonenumber: '',
  email: '',
  majorField: '',
  summary: ''
})

const rules = ref({
  teachId: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
  nickName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  deptId: [{ required: true, message: '请选择学院', trigger: 'change' }],
  majorField: [{ required: true, message: '请输入研究方向', trigger: 'blur' }]
})

const cancel = () => close()

const confirm = () => {
  formRef.value.validate((valid) => {
    if (!valid) return
    const isUpdate = !!form.value.teacherId
    const apiCall = isUpdate ? updateTeacher(form.value) : addTeacher(form.value)
    apiCall.then(() => {
      proxy.$modal.msgSuccess(isUpdate ? '修改成功' : '新增成功')
      emit('update')
      close()
    })
  })
}

const close = () => ((dialogVisible.value = false), (loading.value = false))

const reset = () => {
  form.value = {
    teacherId: undefined,
    teachId: '',
    nickName: '',
    deptId: undefined,
    phonenumber: '',
    email: '',
    majorField: '',
    summary: ''
  }
  proxy.resetForm('formRef')
}

const init = async (id) => {
  reset()
  dialogTitle.value = id ? '修改教师信息' : '新增教师信息'
  if (id) {
    await getDetail(id)
  }
  dialogVisible.value = true
}

const getDetail = async (id) => {
  const res = await getTeacher(id)
  const data = res.data || {}
  form.value.teacherId = data.teacherId
  form.value.teachId = data.teachId ?? ''
  form.value.nickName = data.nickName ?? ''
  form.value.deptId = data.deptId ?? undefined
  form.value.phonenumber = data.phonenumber ?? ''
  form.value.email = data.email ?? ''
  form.value.majorField = data.majorField ?? ''
  form.value.summary = data.summary ?? ''
}

const openDialog = (id = null) => {
  init(id)
}

defineExpose({ openDialog })
</script>
